import React from 'react';
import {
  View,
  StyleSheet,
  Text,
} from 'react-native';
import {
  screenWidth,
  mainBgColorWhite,
  px2dp,
  fontColorBlack,
  fontColorSecDeepGray,
} from '@/styles';

import CameraCard from './camera-card';

/**
 * @author kanglang
 * @description 人车合照
 * @createDate 2020/8/27
 *
 */
export default class PeopleTruckPhoto extends React.Component {
  onCatchImage = type => {
    this.props.onImageData && this.props.onImageData(type);
  }

  render() {
    const { image11 } = this.props;
    return (
      <View style={styles.workLicenseFloor}>
        <Text style={styles.title}>
          人车合照
          <Text style={{ color: fontColorSecDeepGray, fontSize: px2dp(28) }}>
            (必填)
          </Text>
        </Text>
        <View style={styles.list}>
          <CameraCard
            title='上传人车合照'
            type={11}
            icon={image11}
            onCatchImage={(type) => this.onCatchImage(type)}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  workLicenseFloor: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    marginTop: px2dp(24),
    padding: px2dp(32),
    alignItems: 'center'
  },
  title: {
    fontSize: px2dp(32),
    color: fontColorBlack,
    fontWeight: 'bold',
    textAlign: 'left',
    width: '100%'
  },
  desc: {
    fontSize: px2dp(28),
    color: fontColorSecDeepGray,
    textAlign: 'center',
  },
  bgStyle: {
    width: px2dp(540),
    height: px2dp(320),
    marginVertical: px2dp(32),
    justifyContent: 'center',
    alignItems: 'center'
  },
  cameraImg: {
    width: px2dp(144),
    height: px2dp(144),
  },
  list: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
  }
});
